<template>
    <div class="privateAlbum">
        <div class="moduleHead">
            <span class="center">
                 <router-link :to="{ name: 'me' }">
                    <span class="back"></span>
            </router-link>
            <span>{{language.privateAlbum_title}}</span>
            <router-link :to="{ name: 'privateAlbumRequests' }">
                <span class="btnSetting"></span>
            </router-link>
            </span>
        </div>
        <div class="body">
            <dl class="photoListLi">
                <router-link :to="{ name: 'uploadPhoto',query: { type: 'private'}}">
                    <div class="btnUpload main_border"></div>
                </router-link>
                <dd @click="openDialogSlider(index)" class="photoListLi" v-for="(item, index) in privatePhotoList" :key="item.item_id">
                    <div class="img">
                        <lazyImg :src="item.picture"></lazyImg>
                    </div>
                </dd>
            </dl>
        </div>
        <dialogSlider v-if='dialogSlider' :propsDialogSlider.sync="dialogSlider" :propsList.sync="list" :propsIndex.sync="index" :propsDialogType.sync="type">
        </dialogSlider>
    </div>
</template>
<script>
import dialogSlider from './DialogSlider'
import lazyImg from './LazyImg'


export default {

    name: 'privateAlbum',

    components: {
        dialogSlider,
        lazyImg
    },

    computed: {
        privatePhotoList() {
            return this.$store.state.user.userInfo.private_pictures;
        }
    },

    data: function() {
        return {
            type: 'edit-private',
            index: 0,
            dialogSlider: false,
            list: []
        }
    },

    methods: {

        getPicturesPS: function() {
            var arr = this.privatePhotoList,
                psArr = [];
            for (var i in arr) {
                var obj = {
                    mssrc: arr[i].icon,
                    src: arr[i].picture,
                    pid: arr[i].item_id,
                    title: arr[i].desc,
                    w: arr[i].ix,
                    h: arr[i].iy,
                }
                psArr.push(obj);
            }
            return psArr;
        },

        openDialogSlider: function(index) {
            this.dialogSlider = true;
            this.index = index;
            this.list = this.getPicturesPS();
        }
    }
}

</script>
<style scoped>
.privateAlbum {
    background: #fff;
}

.privateAlbum .noticePhoto {
    line-height: 30px;
    min-height: 30px;
    text-align: center;
    border-radius: 4px;
    font-size: 12px;
    margin: 8px 8px 0 8px;
    position: relative;
    border: 1px solid #D4AC67;
    color: #D4AC67;
}

.privateAlbum .noticePhoto .arrow {
    position: absolute;
    right: 15px;
    top: 8px;
}

.privateAlbum .noticePhoto .arrow:before {
    border: 6px solid transparent;
    border-left: 6px solid #f5f7f8;
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    right: -12px;
    content: '';
    right: -13px;
    border-left-color: #D4AC67;
}

.privateAlbum .noticePhoto .arrow:after {
    border: 6px solid transparent;
    border-left: 6px solid #f5f7f8;
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    right: -12px;
    content: '';
}

.privateAlbum {
    background: #fff;
    padding-top: 44px;
}

.privateAlbum .btnSetting {
    height: 44px;
    width: 44px;
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    display: block;
    background-image: url(../assets/ico_photo_setting.png);
    background-size: 27px auto;
    background-repeat: no-repeat;
    background-position: center;
}

.privateAlbum .body {
    padding-bottom: 40px;
}

.privateAlbum .photoListLi {
    overflow: hidden;
}

.privateAlbum .photoListLi dd {
    float: left;
    margin: 8px 0 0 8px;
    height: 0;
    width: calc((100% - 40px) / 4);
    padding-bottom: calc((100% - 40px) / 4);
    overflow: hidden;
    position: relative;
}

.privateAlbum .photoListLi dd:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: #f6f7f9 url(../assets/max_loading.gif) center no-repeat;
    background-size: 30px 30px;
}

.privateAlbum .photoListLi dd .img {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.privateAlbum .btnUpload {
    position: relative;
    float: left;
    margin: 8px 0 0 8px;
    height: 0;
    width: calc((100% - 40px) / 4);
    padding-bottom: calc((100% - 40px) / 4);
    overflow: hidden;
}

.privateAlbum .btnUpload:before {
    content: '';
    width: 26px;
    height: 2px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -1px 0 0 -13px;
    border-top-style: solid;
    border-top-width: 2px;
    border-top-color: inherit;
    opacity: .7;
}

.privateAlbum .btnUpload:after {
    content: '';
    width: 2px;
    height: 26px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -13px 0 0 -1px;
    border-left-style: solid;
    border-left-width: 2px;
    border-left-color: inherit;
    opacity: .7;
}

</style>
